<template>
    <v-dialog v-model="editdialog" scrollable persistent max-width="85%" :fullscreen="$vuetify.breakpoint.xsOnly">
      <v-card>
        <v-card-title>
          <span class="headline">{{ name }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-container grid-list-md>
            <v-form v-model="valid"  ref="editserviceform">
            <v-layout wrap>
              <v-flex xs12 sm6 md3>
                <v-text-field label="服务名称" v-model="fields.name" :rules="nameRules"  required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="服务英文名" v-model="fields.name_en"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="外部域名" v-model="fields.url"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-autocomplete :items="OutterIpSource.items" v-model="fields.OutterIpSource" item-text="text" item-value="value" :clearable="true" autocomplete label="外网IP" ></v-autocomplete>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="内部域名" v-model="fields.innerUrl"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="内网IP" v-model="fields.innerIp" :rules="innerIpRules" :error-messages="msg.innerIp" required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-autocomplete :items="type.items" v-model="fields.serviceType" item-text="text" :rules="typeRules" required item-value="value" label="服务类型" autocomplete ></v-autocomplete>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-autocomplete :items="status.items" v-model="fields.status" item-text="text" :rules="statusRules" required item-value="value" label="状态"></v-autocomplete>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-autocomplete :items="env.items" v-model="fields.env" item-text="text" :rules="envRules" item-value="value" required label="环境" ></v-autocomplete>
              </v-flex>
              <v-flex xs12 sm12 md12>
                <v-autocomplete :items="host.items" v-model="fields.host" :clearable="true"
                          multiple chips item-text="text" item-value="value" label="主机" autocomplete></v-autocomplete>
              </v-flex>
            </v-layout>
            </v-form>
          </v-container>
          <small>*必填</small>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" @click.native="closeEditService()" small><h4>关闭</h4></v-btn>
          <v-btn color="warning" @click.native="editService($refs.editserviceform)" small><h4>保存</h4></v-btn>
          <v-btn color="error" @click.native="deleteService()" small><h4>删除</h4></v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('editservice')

export default {
  name: 'editservice',
  data: function () {
    return this.$store.state.editservice
  },
  methods: {
    ...mapActions({
      editService: 'editService',
      deleteService: 'deleteService',
      closeEditService: 'closeEditService',
      loadEditService: 'loadEditService',
      serviceEditEnv: 'serviceEditEnv'
    })
  },
  props: {
    editdialog: {
      type: Boolean,
      default: null
    },
    id: {
      type: Number,
      default: null
    }
  },
  watch: {
    editdialog () {
      this.$refs.editserviceform.reset()
      let msg = this.msg
      for (var i in msg) {
        msg[i] = ''
      }
      if (this.editdialog) {
        this.loadEditService(this.id)
      } else {
        this.$store.dispatch('listservice/handlerService')
      }
    },
    'fields.env': {
      handler: function () {
        if (this.fields.env) {
          this.serviceEditEnv()
        }
      }
    }
  }
}
</script>
